import React, {useState, useEffect} from 'react'
// 基于模块化
// 组件化开发
// 函数组件(不会出现this.xxx)
// http://8.142.171.141:8080/school-news/news/pageList
const Left = ()=>{
    const [num,setNum] = useState(0);
    const [list,setList] = useState([]);
    useEffect(()=>{
        fetch('http://8.142.171.141:8080/school-news/news/pageList?newsType=1')
            .then(res=>res.json())
            .then(res=>{
                console.log(res);
                setList(res.data.content)
            })
    },[])
    useEffect(()=>{
        console.log('effect');
        return ()=>{
            console.log('unmount')
        }
    },[])
    return <div>
        left
        <h2>新闻列表</h2>
        <ul>
            {
                list.map(item=>{
                    return <li key={item.id}>
                        {item.newsTitle}
                    </li>
                })
            }
        </ul>
        <h2>{num}</h2>
        <button onClick={()=>setNum(num+1)}>点击+1</button>
    </div>
}
const Right = ()=><div>Right</div>

const App = () => {
    // 状态来控制页面的变化
    // 状态是组件私有的，应用在组件内部
    const [showLeft,setShowLeft] = useState(true)
    const toggleLeft = ()=>{
        setShowLeft(!showLeft)
    }
    return (
        <div>
            <button onClick={toggleLeft}>
                {showLeft?'隐藏':'显示'}Left
            </button>
            {
                showLeft && <Left /> 
            }
            {/* {
                showLeft?<Left />:null
            } */}
            <Right />
        </div>
    )
}

export default App



// js框架 
// react vue angular

// Hybrid混合开发
// React Native  uniapp(vue) ionic(angular)
// flutter(dart)
